<template>
	<view>
		<view class="content">
			<view class="left">
				<view class="qq-icon">
					<image src="../../static/images/common/qqicon.png" mode=""></image>
				</view>
				<view class="text">
					联系商家
				</view>
			</view>
			<view class="right">
				<view class="money">
					<view class="cart-icon" @click="show=true">
						<image src="../../static/images/buildingmaterials/card.png" mode=""></image>
						<view class="num">
							5
						</view>
					</view>
					<view class="sum-text">
						合计:
					</view>
					<view class="sum-money">
						￥655
					</view>
				</view>
				<view class="go-pay" @click="createdOrder">
					去结算
				</view>
			</view>
		</view>
		<u-popup v-model="show" mode="bottom" border-radius="40" :mask="false">
			<scroll-view scroll-y="true" class="cart-scrool">
				<view class="title-box">
					<view class="left">
						<view class="select-icon">
							<!-- <image src="../../static/images/job/isactive.png" mode=""></image> -->
							<image src="../../static/images/job/unactive.png" mode=""></image>
						</view>
						<view class="all-select">
							全选
						</view>
					</view>
					<view class="right">
						清空购物车
					</view>
				</view>
				<block>
					<view class="goods-item">
						<view class="left">
							<!-- <image src="../../static/images/job/isactive.png" mode=""></image> -->
							<image src="../../static/images/job/unactive.png" mode=""></image>
						</view>
						<view class="right">
							<good-item :margin="60"></good-item>
						</view>
					</view>
				</block>
				<view class="cart-fill"></view>
			</scroll-view>
		</u-popup>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				show:false
			}
		},
		methods:{
			createdOrder(){
				this.$u.route({
					url: 'pages/buildingmaterials/order/creat',
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.content{
		position: fixed;
		bottom: 50rpx;
		left: 0;
		right: 0;
		padding: 0 30rpx;
		width: 100%;
		box-sizing: border-box;
		margin: 0 auto;
		display: flex;
		justify-content: space-between;
		z-index: 999999;
		.left{
			width:166rpx;
			height:100rpx;
			background:rgba(241,234,209,1);
			opacity:1;
			border-radius:60rpx 6rpx 6rpx 60rpx;
			.qq-icon{
				width: 32rpx;
				height: 38rpx;
				margin: 15rpx 0 2rpx 72rpx;
				image{
					width: 32rpx;
					height: 38rpx;
				}
			}
			.text{
				margin-left: 42rpx;
				font-size:22rpx;
				font-weight:400;
				line-height:30rpx;
				color:rgba(102,102,102,1);
				opacity:1;
			}
		}
		.right{
			flex: 1;
			margin-left: 6rpx;
			display: flex;
			justify-content: space-between;
			.money{
				flex: 1;
				height:100rpx;
				background:rgba(241,234,209,1);
				opacity:1;
				border-radius:6rpx 0px 0px 6rpx;
				line-height: 100rpx;
				display: flex;
				.cart-icon{
					width: 52rpx;
					height: 52rpx;
					margin-left: 25rpx;
					margin-top: 16rpx;
					position: relative;
					image{
						width: 52rpx;
						height: 52rpx;
					}
					.num{
						width:30rpx;
						height:30rpx;
						background:rgba(255,32,32,1);
						border-radius:50%;
						position: absolute;
						top: 0rpx;
						right: -15rpx;
						font-size:22rpx;
						font-weight:400;
						line-height:30rpx;
						color:rgba(255,255,255,1);
						opacity:1;
						text-align: center;
					}
				}
				.sum-text{
					margin-left: 30rpx;
					font-size:24rpx;
					font-weight:600;
					color:rgba(102,102,102,1);
					opacity:1;
				}
				.sum-money{
					margin-left: 6rpx;
					font-size:32rpx;
					font-weight:600;
					color:rgba(51,51,51,1);
					opacity:1;
				}
			}
			.go-pay{
				width:166rpx;
				height:100rpx;
				background:linear-gradient(270deg,rgba(211,176,105,1) 0%,rgba(228,205,112,1) 100%);
				opacity:1;
				border-radius:0px 60rpx 60rpx 0px;
				text-align: center;
				line-height: 100rpx;
				font-size:30rpx;
				font-weight:600;
				color:rgba(51,51,51,1);
				opacity:1;
			}
		}
	}
	.cart-scrool{
		max-height: 770rpx;
		padding: 70rpx 30rpx 0rpx;
		box-sizing: border-box;
		.title-box{
			width: 100%;
			display: flex;
			justify-content: space-between;
			margin-bottom: 60rpx;
			.left{
				display: flex;
				.select-icon{
					width: 44rpx;
					height: 44rpx;
					margin-right: 20rpx;
					image{
						width: 44rpx;
						height: 44rpx;
					}
				}
				.all-select{
					font-size:32rpx;
					font-weight:400;
					line-height:44rpx;
					color:rgba(102,102,102,1);
					opacity:1;
				}
			}
			.right{
				font-size:30rpx;
				font-weight:400;
				line-height:44rpx;
				color:rgba(51,51,51,1);
				opacity:1;
			}
		}
		.cart-fill{
			height: 210rpx;
			width: 100%;
		}
		.goods-item{
			width: 100%;
			display: flex;
			.left{
				width: 44rpx;
				height: 44rpx;
				margin-right: 20rpx;
				margin-top: 58rpx;
				image{
					width: 44rpx;
					height: 44rpx;
				}
			}
			.right{
				flex:1;
			}
		}
	}
</style>
